<template>
  <el-dialog
    :title="title"
    width="600px"
    :before-close="handleClose"
    :visible="visible"
  >
    <div>
      <div style="padding: 5px;">
        <el-button type="primary" size="mini" icon="el-icon-user" @click="chioseEmp(k)" />
      </div>
      <div v-if="emp" class="userInfo">
        <icon icon="el-icon-delete" class="drop" @click="removeEmp" />
        <div class="head">
          <img
            v-if="emp.UserHead == null || emp.UserHead == ''"
            src="/image/defhead.png"
            width="50"
            height="50"
          >
          <el-avatar
            v-else
            shape="square"
            :size="50"
            :src="emp.UserHead | imageUri"
          />
        </div>
        <div class="content">
          <div class="item">
            <i
              v-if="emp.Sex == 1"
              style="color: #409eff;margin-left:5px;"
              class="el-icon-male"
            />
            <i
              v-else-if="emp.Sex == 2"
              style="color: #f56c6c;margin-left:5px;"
              class="el-icon-female"
            />
            <el-link @click="showEmp(emp)">{{ emp.EmpName }}</el-link>
          </div>
          <div class="empNo">{{ emp.Dept }}</div>
        </div>
      </div>
    </div>
    <div slot="footer" style="text-align: center;width: 100%;">
      <el-button type="primary" @click="save">确定</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
    <empChoice
      :emp-id="empId"
      :is-multiple="false"
      :is-entry="true"
      :title="title"
      :visible.sync="empVisible"
      @save="saveEmp"
    />
    <empModel
      :id="showEmpId"
      :visible="showVisible"
      @close="showVisible=false"
    />
  </el-dialog>
</template>

<script>
import empChoice from '@/components/emp/empChoice.vue'
import empModel from '@/components/emp/empModel.vue'
export default {
  components: {
    empChoice,
    empModel
  },
  props: {
    btnName: {
      type: String,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      emp: null,
      title: null,
      empId: null,
      showEmpId: null,
      showVisible: false,
      empVisible: false
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    showEmp(emp) {
      this.showEmpId = emp.EmpId
      this.showVisible = true
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
    removeEmp() {
      this.emp = null
      this.empId = null
    },
    saveEmp(e) {
      if (e.user.length > 0) {
        this.emp = e.user[0]
        this.empId = e.keys[0]
      } else {
        this.emp = null
        this.empId = null
      }
    },
    save() {
      if (this.emp == null) {
        this.$message({
          message: '请选择' + this.btnName + '!',
          type: 'warning'
        })
        return
      }
      this.handleClose()
      this.$emit('save', this.empId)
    },
    chioseEmp() {
      this.empVisible = true
    },
    reset() {
      this.empId = null
      this.emp = null
      this.title = '选择' + this.btnName
    }
  }
}
</script>

<style  scoped>
.userInfo {
  max-width: 250px;
  min-width: 210px;
  padding: 5px;
  height: 70px;
  border: 1px solid #90939994;
}
.userInfo .drop {
    position: relative;
    right: 2px;
    color: red;
    cursor: pointer;
}
.userInfo .head {
  width: 50px;
  float: left;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.userInfo .el-avatar {
  vertical-align: middle;
}
.userInfo .content {
  width: 160px;
  float: left;
  text-align: left;
  height: 60px;
}
.userInfo .content .item {
  text-indent: 2px;
  margin: 0;
  font-size: 16px;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  float: left;
  height: 30px;
}

.userInfo .content .empNo {
  padding-left: 10px;
  margin: 0;
  color: #82848a;
  font-size: 12px;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  float: left;
  height: 30px;
}
.userInfo .content i {
  font-weight: 600;
}
</style>
